<template>
	<view class="sort-view">
		<!-- 左边 -->
		<view class="sort-left">
			<text v-for="(item,index) in sort" :key="index" @click="selectSort(index,item)" :class="[sortNum == index ? 'select-style' : '']">{{item.categoryName}}</text>
		</view>

		<!-- 右边 -->
		<view class="sort-right">
			<!-- 分类标题 -->
			<view class="title" v-if="sort.length > 0">
				<view>{{sortSelect.categoryName}}</view>
				<!-- 	<view class="icon">
					<u-icon name="arrow-right" size="16" bold="true"></u-icon>
				</view> -->
			</view>

			<!-- 子分类 -->
			<view class="shop">
				<view class="commodity" v-for="(item,index) in children" :key="index" @click="goChildClassify(item,index)">
					<view class="com-image">
						<image class="image" :src="baseUrl+'/'+item.categoryImg" mode="aspectFill"></image>
					</view>
					<view class="com-context">
						<text class="overflow">{{item.categoryName}}</text>
					</view>
				</view>
			</view>

			<!-- 上拉加载 -->
			<view class="loading-height">
				<u-loadmore v-if="loading" :status="status" />
			</view>
		</view>
	</view>
</template>
</template>

<script>
	import { baseUrl, getChildren, getClasify, getGoods } from "../../api/classifyApi.js"
	export default {
		data() {
			return {
				sort: [], // 分类列表
				children: [], // 子分类列表
				sortNum: 0, // 分类的下标，用以设置点击分类样式改变，默认为 0
				sortSelect: {}, // 存储点击的分类的名字，用以上拉加载和不同分类展示不同商品	
				loading: false, // 上拉加载圈圈是否展示
				pageNum: 0, // 请求的页数，每请求一次，页数 +1
				status: '努力加载中',
				baseUrl: ''
			}
		},
		created() {
			this.baseUrl = baseUrl

			this.getData()
		},
		methods: {
			async getData() {
				// 获得所有分类
				let res = await getClasify()
				console.log("分类", res);
				this.sort = res.data.data

				// 默认展示第一个分类的商品
				this.selectSort(0, this.sort[0])
			},

			//点击分类,获得所有商品
			async selectSort(index, item) {
				console.log("1111", index, item);
				this.sortNum = index //点击设置下标
				this.sortSelect = item
				// 发起请求		
				let res = await getChildren({ id: item.categoryId })
				console.log("子分类", res);
				this.children = res.data.data
			},

			// 跳转子分类
			goChildClassify(item, index) {
				console.log("222", item);
				let sort = JSON.stringify(item)
				uni.navigateTo({
					url: `/pages/classify/subclassification?sort=${sort}`
				});
			}

		}
	}
</script>

<style scoped lang="less">
	.sort-view {
		display: flex;
	}

	.sort-left {
		width: 200rpx;
		text-align: center;
		background-color: #f6f6f6;
		height: 100vh;
		position: fixed;
		left: 0;
		top: 0;
		bottom: 0;
	}

	.sort-left text {
		display: block;
		color: #5f5f5f;
		padding: 20rpx 0;
		border-bottom: 1px solid #FFFFFF;
		font-size: 28rpx;
	}

	/* 左边选中*/
	.select-style {
		background-color: #FFFFFF !important;
	}

	/* 右边 */
	.sort-right {
		margin: 0 20rpx 0 220rpx;
		flex: 1;
	}

	.title {
		padding: 20rpx 0;
		font-size: 28rpx;
		font-weight: bold;
		display: flex;
		justify-content: space-between;
	}

	.shop {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;

		.commodity {
			width: 140rpx;
			height: 210rpx;
			margin-left: 6rpx;
			text-align: center;
			margin-bottom: 20rpx;
		}


		.com-image {
			width: 140rpx;
			height: 140rpx;

			.image {
				width: 120rpx;
				height: 120rpx;
				border-radius: 10rpx;
			}

			text-align: center;
		}

		.com-context {
			width: 140rpx;
			text-align: center;
			font-size: 26rpx;
		}
	}

	.shop::after {
		content: '';
		width: 140rpx;
		margin-left: 6rpx;
		border: 1px solid transparent;
	}

	/* loading设置的高度 */
	.loading-height {
		height: 90rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	/* 文本超过隐藏 */
	.overflow {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}
</style>
